<template>

    <div class="Footer_Component">
        <!-- 底部显示区域 -->
        <div class="view">
            <!-- 中间版权部分 -->
            <div class="content">
                <div class="left">
                    <div class="left_li">
                        <div class="left_li_i left_li_i_a" @click="To_Product_Introduction">产品介绍</div>
                        <div class="left_li_i">|</div>
                        <div class="left_li_i left_li_i_a" @click="To_Call_Developer">技术支持</div>
                    </div>
                    <div class="left_li">开发单位：曲靖市消防救援支队指挥中心</div>
                    <div class="left_li">单位地址：云南省曲靖市麒麟区紫云南路118号</div>
                </div>
                <div class="right">
                    <div class="right_li">
                        <div class="img">
                            <img src="../assets/team_logo.png" alt="">
                        </div>
                        <div class="text"></div>
                    </div>
                    <div class="right_li">
                        <div class="img">
                            <img src="../assets/logo.jpg" alt="">
                        </div>
                        <div class="text"></div>
                    </div>
                    <div class="right_li"  @mouseenter="is_QR_show" @mouseleave="is_QR_hide">
                        <div class="img">
                            <img src="../assets/zhzx_QRcode.jpg" alt="">
                        </div>
                        <div class="text">官方微信</div>
                        <!-- 二维码放大 -->
                        <div class="big_QRcode"  v-if="QR_is_show">
                            <img src="../assets/zhzx_QRcode.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div> 

        <!-- 产品介绍弹窗 -->
         <div class="Footer_Product_Introduction_view" v-if="is_show_Product_Introduction"> 
            <div class="Footer_Product_Introduction_view_title">
                <div class="Footer_Product_Introduction_view_title_li"></div>
                <div class="Footer_Product_Introduction_view_title_li">产品介绍</div>
                <div class="Footer_Product_Introduction_view_title_li">
                    <i class="iconfont icon-guanbi Footer_Product_Introduction_shutdown" @click="To_Product_Introduction"></i>
                </div>
            </div>
           
            <div class="Footer_Product_Introduction_view_content">
                <div class="Footer_Product_Introduction_view_content_left">
                    <div class="Footer_Product_Introduction_view_content_left_content">
                        <strong>自主研发接警调度辅助训练平台</strong>
                        <p>自开展集中接警机制改革以来，支队指挥中心全面承担全市接警调度任务。然而，接警员对全市辖区地理位置的熟悉程度，尚难以适应接警任务范围的大幅拓展，导致接警过程中耗时较长，甚至出现救援力量误派等情况，极大影响了接警调度效率。</p>
<p>为有效解决这一痛点、难点问题，支队指挥中心组织研发了“接警调度地址地名辅助训练平台”。该平台设有“训练”和“考核”两大核心模块：训练模块整合了全市91个乡镇及37个街道的基础地理资料，融合游戏化学习理念，创新设置了多种寓教于乐学习方法，便于接警员学习记忆，内容包含“区划全览”“看图识域”“地名寻图”等内容，其中“区划全览”可查看各县市区所辖全部乡镇街道的数量、区位、名称等信息，“看图识域”可通过地图识别对应行政区划名称，“地名寻图”可随机生成乡镇、街道名称，并在地图上定位其所属行政区域，通过互动式学习机制，将传统枯燥的学习过程转化为趣味性的互动体验，有效提升了学习成效；考核模块则侧重于检验和巩固学习成果，该模块可随机生成100道考题，参考接警员对给定的乡镇街道所属县市区进行逐一判断，系统评估接警员对全市乡镇街道情况的掌握程度，检验接警员在图上精准识别乡镇街道的地理位置能力。通过“训练+考核”的闭环设计，有效解决以往接警员在掌握辖区行政区划记忆模糊、定位迟缓等问题，接警员对全市地理信息快速定位、空间记忆能力显著提升。</p>
<p>下一步，支队还将深化平台迭代研发，完善国家队、专职队等救援力量的空间分布、县乡两级基础资料库，拓展交通要道等地理信息维度，增设同音字联想、首字母检索、模糊地名匹配等智能查询手段，开发接警场景专项训考模块，持续提升队伍接警调度水平。</p>
                    </div>
                </div>
                <div class="Footer_Product_Introduction_view_content_right">
                    <div class="Footer_Product_Introduction_view_content_right_title">使用说明</div>
                    <div class="Footer_Product_Introduction_view_content_right_content">
                        <!-- element组件 -->
                        <div class="block">
                            <el-carousel trigger="click" height="40vh">
                            <el-carousel-item v-for="item in 4" :key="item">
                                <!-- <h3 class="small">{{ item }}</h3> -->
                                <img :src="require(`../assets/Explanation_${item}.jpg`)" alt="说明图">
                            </el-carousel-item>
                            </el-carousel>
                        </div>
                        <!-- 组件 -->
                    </div>
                </div>
            </div>
         </div>


         <!-- 技术支持弹窗 -->
        <div class="Footer_Developer_view"  v-if="is_show_Developer_view">
            <div class="Footer_Developer_view_title">
                <div class="Footer_Developer_view_title_li"></div>
                <div class="Footer_Developer_view_title_li">开发者技术支持</div>
                <div class="Footer_Developer_view_title_li">
                    <i class="iconfont icon-guanbi Footer_Product_Introduction_shutdown" @click="To_Call_Developer"></i>
                </div>
            </div>
            <!-- 中间 -->
            <div class="Footer_Developer_view_content">
                <div class="Footer_Developer_view_content_li">
                    <div class="Footer_Developer_view_content_li_title">微信扫一扫</div>
                    <div class="Footer_Developer_view_content_li_content">
                        <img src="../assets//Developer_wechatQRcode.png" alt="">
                    </div>
                </div>
                <div class="Footer_Developer_view_content_li">
                    <div class="Footer_Developer_view_content_li_title">联系电话</div>
                    <div class="Footer_Developer_view_content_li_content">
                        <div class="Footer_Developer_view_content_li_content_li">
                            <i class="iconfont icon-dianhua"></i>&nbsp;&nbsp;<span>：15887935394</span>
                        </div>
                        <div class="Footer_Developer_view_content_li_content_li">
                            <div class="ronghetongxin_logo">
                                <img src="../assets/ronghetongxin.png" alt="">
                            </div>
                            <div class="ronghetongxin_phone">：2239</div>
                        </div>
                    </div>
                </div>
                <div class="Footer_Developer_view_content_li">
                    <div class="Footer_Developer_view_content_li_title">QQ扫一扫</div>
                    <div class="Footer_Developer_view_content_li_content">
                        <img src="../assets//Developer_qqQRcode.jpg" alt="">
                    </div>
                </div>
            </div>
            <!-- 底部 -->
             <div class="Footer_Developer_view_bottom">
                <div class="Footer_Developer_view_bottom_text">
                    尊敬的各位用户，如在使用本产品的过程中出现任何的错误信息或者功能失效的情况请联系开发者进行修复处理，<br> 
                    感谢您为本产品做出的贡献！
                </div>
             </div>
        </div>





    </div>

</template>


<script>
export default{
    name:'Footer_Component',
    data(){
        return{
            QR_is_show:false,  // 放大二维码 
            is_show_Developer_view:false,   //开发者
            is_show_Product_Introduction:false,  //产品介绍
        }
    },
    methods:{
        is_QR_show(){
            this.QR_is_show = true
        },
        is_QR_hide(){
            this.QR_is_show = false
        },
        To_Product_Introduction(){
            // 打开产品介绍界面
            this.is_show_Developer_view = false
            this.is_show_Product_Introduction = !this.is_show_Product_Introduction
        },
        To_Call_Developer(){
            // 打开开发者联系方式界面
            // console.log('开发者诶点击')
            this.is_show_Product_Introduction = false
            this.is_show_Developer_view = !this.is_show_Developer_view
        },
    }
}
</script>


<style scoped>
    .Footer_Component{
        width: 100%;
        height: 100%;
        /* background-color: yellowgreen; */
    }
    .view{
        width: 100%;
        height: 70%;
        background-color: rgba(2, 8, 24,1);
        position: relative;
        top:30%;
        /* border-top: 1px solid black; */
        box-sizing: border-box;
        box-shadow: 0 0 2px 2px black;
    }
    .content{
        width: 30%;
        height: 90%;
        /* background-color: aquamarine; */
        position: relative;
        top:10%;
        left: calc(50% - 15%);
    }
    .content>div{
        float: left;
    }
    .left{
        width: 50%;
        height: 100%;
        /* background-color: red; */
        box-sizing: border-box;
        overflow: hidden;
    }
    .right{
        width: 50%;
        height: 100%;
        /* background-color: blanchedalmond; */
        float: left;
        /* position: relative;
        top:-9vh;
        left: 50%; */
    }
    .left_li{
        width: 100%;
        height: 33.3%;
        /* background-color: steelblue; */
        /* border-bottom: 1px solid black; */
        font-size: 0.7vw;
        line-height: 3vh;
        color: white;
    }
    .left_li_i{
        width: 33.3%;
        height: 100%;
        /* background-color: red; */
        float: left;
        box-sizing: border-box;
        /* border-right: 1px solid black; */
    }
    .left_li .left_li_i:nth-child(2){
        width: 13%;
    }
    .left_li_i_a:hover{
        color: greenyellow;    
        cursor: pointer;
    }

    .left_li_i_a:active{
        color:rgb(231, 155, 14);
        cursor: pointer;
    }


    .right_li{
        width: 33.3%;
        height: 100%;
        /* background-color: aqua; */
        float: left;
        box-sizing: border-box;
        /* border-right: 1px solid black; */
    }

    .right_li .img{
        width: 80%;
        height: 80%;
        /* background-color: violet; */
        position: relative;
        left: calc(50% - 40%);
    }
    .right_li .img img{
        width: 100%;
        height: 100%;
    }
    .right_li .text{
        width: 100%;
        height: 20%;
        /* background-color: wheat; */
        text-align: center;
        line-height: 2vh;
        color: white;
    }

    .big_QRcode{
        width: 7vw;
        height: 14vh;
        /* background-color: red; */
        position: relative;
        top: -15vh;
        left: 5vw;
    }
    .big_QRcode img{
        width: 100%;
        height: 100%;
    }



    /* 产品介绍 */
    .Footer_Product_Introduction_view{
        width: 50%;
        height: 50vh;
        background-color: white;
        position: relative;
        top:-57vh;
        left:calc(50% - 25%);
        border-radius: 10px;
        overflow: hidden;
    }
    .Footer_Product_Introduction_view_title{
        width: 100%;
        height: 10%;
        /* background-color: yellow; */
        /* float: left; */
        box-sizing: border-box;
        /* border: 1px solid black; */
    }

    .Footer_Product_Introduction_view_title_li{
        width: 33.3%;
        height: 100%;
        /* background-color: aquamarine; */
        float: left;
        border-bottom: 1px solid black;
        box-sizing: border-box;
        text-align: center;
        line-height: 4.5vh;
        font-size: 1vw;
    }
    .Footer_Product_Introduction_view_title_li i{
        position: relative;
        left: 42%;
        font-size: 1.5vw;
    }
    .Footer_Product_Introduction_view_title_li i:hover{
        color: greenyellow;
    }
    .Footer_Product_Introduction_view_title_li i:active{
        color: red;
    }
    .Footer_Product_Introduction_view_content{
        width: 100%;
        height: 90%;
        /* background-color: yellow; */
    }

    .Footer_Product_Introduction_view_content_left{
        width: 40%;
        height: 100%;
        /* background-color: tomato; */
        float: left;
    }

    .Footer_Product_Introduction_view_content_right{
        width: 60%;
        height: 100%;
        /* background-color: violet; */
        float: left;
    }

    .Footer_Product_Introduction_view_content_left_content{
        width: 95%;
        height: 95%;
        background-color: rgb(220, 223, 222);
        position: relative;
        top: 2.5%;
        left: 2.5%;
        overflow-y: scroll;   /* 确保垂直滚动 */
        /*overflow-x: scroll;   !* 确保水平滚动 *!*/
        scrollbar-width:none;   /*火绒浏览器 */
        -ms-overflow-style: none;  /* IE浏览器 */
        padding: 0.5vw;
        box-sizing: border-box;
        /* overflow: hidden; */
    }

    .Footer_Product_Introduction_view_content_left_content strong{
        display: block;
        width: 100%;
        /* height: 8%; */
        /* background-color: red; */
        text-align: center;
        /* line-height: 3vh; */
        font-size: 0.9vw;
        margin-bottom: 1vh;
        color: rgb(110, 110, 109);
    }
  
    .Footer_Product_Introduction_view_content_left_content p{
        text-indent:2em;
        font-size: 0.7vw;
        line-height: 3vh;
        color: rgb(105, 105, 104);
        /* color: rgb(167, 165, 165); */
    }


    .Footer_Product_Introduction_view_content_right_title{
        width: 99%;
        height: 10%;
        /* background-color: rgb(240, 240, 237); */
        position: relative;
        /* top: 3%; */
        text-align: center;
        line-height: 4vh;
    }

    .Footer_Product_Introduction_view_content_right_content{
        width: 99%;
        height: 88%;
        background-color: aquamarine;
    }
    .Footer_Product_Introduction_view_content_right_content img{
        width: 100%;
        height: 99%;
    }




    /* 开发者技术支持 */
    .Footer_Developer_view{
        width: 30vw;
        height: 30vh;
        background-color: white;
        position: relative;
        top:-37vh;
        left: calc(50% - 15vw);
        border-radius: 10px;
    }
  
    .Footer_Developer_view_title{
        width: 100%;
        height: 15%;
        /* background-color: yellow; */
        border-bottom: 1px solid black;
    }
    .Footer_Developer_view_title_li{
        width: 33.3%;
        height: 100%;
        /* background-color: aqua; */
        float: left;
        box-sizing: border-box;
        /* border-right: 1px solid black; */
        text-align: center;
        line-height: 4vh;
    }

    .Footer_Product_Introduction_shutdown{
        position: relative;
        left: 40%;
        font-size: 1vw;
        font-weight: bolder;
    }
    .Footer_Product_Introduction_shutdown:hover{
        color: yellowgreen;
    }
    .Footer_Product_Introduction_shutdown:active{
        color: red;
    }

    .Footer_Developer_view_content{
        width: 100%;
        height: 60%;
        /* background-color:violet; */
    }
    .Footer_Developer_view_content_li{
        width: 33.3%;
        height: 100%;
        /* background-color: tomato; */
        float: left;
        box-sizing: border-box;
        /* border-right: 1px solid black; */
    }
    .Footer_Developer_view_content_li_title{
        width: 100%;
        height: 15%;
        /* background-color: springgreen; */
        text-align: center;
        line-height: 3vh;
    }
    .Footer_Developer_view_content_li_content{
        width: 100%;
        height: 85%;
        /* background-color: steelblue; */
    }
    .Footer_Developer_view_content_li_content img{
        width: 80%;
        height: 100%;
        position: relative;
        left: calc(50% - 40%);
    }

    .Footer_Developer_view_content_li_content_li{
        width: 100%;
        height: 25%;
        /* background-color: slateblue; */
        border-bottom: 1px solid black;
        /* padding: 0.5vw; */
        text-align: center;
        line-height: 4vh;
        box-sizing: border-box;
    }
    .Footer_Developer_view_content_li_content_li span{
        font-size: 0.90vw;
    }
    .Footer_Developer_view_content_li_content_li i{
        color: rgb(195, 159, 32);
        font-weight: bolder;
        font-size: 1.2vw;
    }


    .ronghetongxin_logo{
        width: 20%;
        height: 100%;
        /* background-color: red; */
        position: relative;
        left: 0.5vw;
    }
    .ronghetongxin_logo img{
        width: 100%;
        height: 100%;
    }
    .ronghetongxin_phone{
        width: 70%;
        height: 100%;
        /* background-color: red; */
        float: left;
        position: relative;
        top:-3vh;
        left: calc(15% + 1.1vw);
        text-align: left;
        font-size: 0.8vw;
        line-height: 3vh;
    }

    .Footer_Developer_view_bottom{
        width: 100%;
        height: 25%;
        /* background-color: red; */
    }

    .Footer_Developer_view_bottom_text{
        width: 50%;
        height: 100%;
        /* background-color: violet; */
        text-align: center;
        position: relative;
        left: calc(50% - 25%);
        font-size: 0.6vw;
    }



</style>